<script setup>
import GrandsonsView from "./GrandsonsView.vue";
// 父传子：在父组件的子组件标签身上声明一个自定义属性，指向要传值，在子组件内部通过defineProps
// defineProps不需要单独引入，直接使用就可以
const props = defineProps({
  msg: String,
  user: Object,
});
console.log("父组件穿过来的数据:");
// console.log(props);

const emits = defineEmits(["update:name"]);
const CkN = () => {
  // 要修改父组件user里的数据，通过emits来发出一个修改的通知
  emits("update:name", "张三");
};

const CkA = () => {
  emits("update:age", "100");
};

// 使用defineExpose
defineExpose({
  name: "jj",
  props,
});
</script>

<template>
  <div>
    儿子组件： 父组件传过来的数据=》{{ props }}
    <button @click="CkN">修改姓名</button>
    <button @click="CkA">修改年龄</button>
    <GrandsonsView />
  </div>
</template>

<style scoped></style>
